<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body {
      background-image: url("imgs/bg.jpg");
      margin: 0; /*去掉自带的外边距*/
      /*cover封面  把背景图片作为封面*/
      background-size: cover;
      /*禁止重复*/
      background-repeat: no-repeat;
      text-align: center;
    }
    /* 设置标题样式 */
    h1 {
      font-size: 72px;
      color: #0096dc;
    }
    /* 设置图片样式，图片后续文本上下居中 */
    h1 img{
      vertical-align: middle;
    }
    /* 设置登录框样式 */
    .el-main {
      background-color: rgba(255, 255, 255, 0.3);
    }
    .el-card {
      width: 380px;
      height: 260px;
      margin: auto;
      background-color: rgba(255, 255, 255, 0.3);
    }
    /* 设置登录框内部样式 */
    .el-form h2{
      font-size: 18px;
      color: #0096dc;
      text-align: left;
    }
    .el-form h2 small{
      float: right;
    }
    .el-form h2 a{
      font-size: 14px;
      color: #0096dc;
      font-weight: normal;
      /* 去掉下划线 */
      text-decoration: none;
    }
    /* 设置登录按钮样式 */
    .el-form .el-button{
      width: 100%;
      background-color: #0096dc;
    }
    /* 页脚样式 */
    .el-footer h4{
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
      font-weight: lighter;
    }
  </style>
  <title>登录酷鲨商城</title>
</head>
<body>
  <el-container id="app">
    <el-header height="280px">
      <h1><img src="imgs/shark.png"> 欢迎来到酷鲨商城</h1>
    </el-header>
    <el-main>
      <el-card>
        <!--label-width设置文本所占的宽度如果不设置,文本单独显示一行-->
        <el-form >
          <h2>登录<small><a href="">忘记密码</a></small></h2>
          <el-form-item>
            <el-input type="text"
                      v-model="user.username"
                      placeholder="请输入用户名"
                      suffix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password"
                      v-model="user.password"
                      placeholder="请输入密码"
                      suffix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item>
            <!--让某一个元素位置进行微调时 使用相对定位-->
            <el-button type="primary" @click="login()">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
    <el-footer height="100px">
      <h4>高慧强学 版权所有</h4>
    </el-footer>
  </el-container>


</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        user: {username: "", password: ""}
      }
    },
    methods: {
      login() {
        console.log(this.user)
        axios.post("/users/login",this.user).then(response=>{
          console.log(response)
          if(response.data==='登录成功'){
            //登录成功
            //跳转到管理首页
            window.location.href = "admin.html"
          }else{
            //登录失败
            this.$message.error(response.data)
          }
        })
      }
    }
  })
</script>
</html>